﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>CustomTable Test</title>
    <link href="../../jquery-easyui-theme/default/easyui.css" rel="stylesheet" />
    <link href="../../jquery-easyui-theme/icon.css" rel="stylesheet" />

    <script src="../../jquery/jquery-1.11.1.js" type="text/javascript"></script>
    <script src="../../jquery-easyui-1.3.6/jquery.easyui.min.js" type="text/javascript" ></script>
    <script src="../../jquery-easyui-1.3.6/locale/easyui-lang-zh_CN.js" type="text/javascript" ></script>
    
    <script src="../../jquery.jdirk.js" type="text/javascript" ></script>
    <script src="../../jeasyui-extensions/jeasyui.extensions.js" type="text/javascript" ></script>

    <script src="../../jeasyui-extensions/jeasyui.extensions.linkbutton.js"></script>
    <script src="../../jeasyui-extensions/jeasyui.extensions.menu.js" type="text/javascript"></script>
    <script src="../../jeasyui-extensions/jeasyui.extensions.panel.js" type="text/javascript"></script>
    <script src="../../jeasyui-extensions/jeasyui.extensions.window.js" type="text/javascript"></script>
    <script src="../../jeasyui-extensions/jeasyui.extensions.dialog.js" type="text/javascript"></script>
    <script src="../../jeasyui-extensions/jeasyui.extensions.tabs.js" type="text/javascript"></script>
    <script src="../../jeasyui-extensions/jeasyui.extensions.datagrid.js" type="text/javascript"></script>
    <script src="../../jeasyui-extensions/jquery.toolbar.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            $.get("boxes-data.json", function (data) {
                var tt1 = $("#tt1");
                tt1.datagrid({
                    idField: "id",
                    remoteSort: false,
                    singleSelect: true,
                    selectOnCheck: false,
                    checkOnSelect: false,
                    pagination: false,
                    refreshMenu: false,
                    selectOnRowContextMenu: true,
                    fit: true,
                    border: false,
                    data: data,
                    columns: [[
                        { field: "id", title: "ID", width: 60, hidden: true },
                        { field: "boxNo", title: "箱号", width: 80 },
                        {
                            field: "boxSpec", title: "箱型", width: 45, formatter: function (val, row, index) {
                                return (row.boxSpec == "40" ? "<span style=\"font-weight: bold; color: green;\">" + row.boxSpec + "</span>" : row.boxSpec) +
                                    row.boxType +
                                    row.boxState;
                            }
                        },
                        { field: "boxWeight", title: "箱重", width: 45 },
                        { field: "fromPort", title: "始发港", width: 50 },
                        { field: "toPort", title: "目的港", width: 50 },
                        { field: "bayCellNo", title: "贝位号", width: 50 },
                        {
                            field: "operator", title: "操作", width: 50, formatter: function () {
                                return "<a class=\"custome-button\" href=\"javascript:void(0);\">操作</a>";
                            }
                        },
                    ]],
                    onLoadSuccess: function (data) {
                        var panel = tt1.datagrid("getPanel");
                        panel.find("a.custome-button").on("click", function () {
                            var index = $(this).closest("tr.datagrid-row").attr("datagrid-row-index"),
                                rows = tt1.datagrid("getRows"),
                                row = rows[index];
                            $.easyui.messager.show("您点击了 " + row.boxNo);
                        });
                        panel.find("div.datagrid-body table.datagrid-btable tr.datagrid-row").draggable({
                            disabled: false, revert: true, cursor: "pointer", deltaX: 5, deltaY: 5,
                            proxy: function (source) {
                                var tr = $(source).clone(), table = $("<table></table>").append(tr);
                                return $("<div></div>").append(table).appendTo("body").hide();
                            },
                            onBeforeDrag: function (e) {
                                return e.which == 1;
                            },
                            onDrag: function (e) {
                                var x = e.pageX - e.data.startX, y = e.pageY - e.data.startY;
                                if ((Math.abs(x) + Math.abs(y)) > 10) { $(this).draggable("proxy").show(); }
                            }
                        });
                    }
                });

                var tt2 = $("#tt2");
                $.each(data, function (index, box) {
                    tt2.append($.string.format("<tr>" +
                        "<td class='boxNo'>{0}</td>" +
                        "<td class='boxSpec'>{1}</td>" +
                        "<td class='boxWeight'>{2}</td>" +
                        "<td class='fromPort'>{3}</td>" +
                        "<td class='toPort'>{4}</td>" +
                        "<td class='bayCellNo'>{5}</td>" +
                        "</tr>",
                        box.boxNo, box.boxSpec, box.boxWeight, box.fromPort, box.toPort, box.bayCellNo));
                });
                tt2.find("tbody tr").draggable({
                    disabled: false, revert: true, cursor: "pointer", deltaX: 5, deltaY: 5,
                    proxy: function (source) {
                        var tr = $(source).clone(), table = $("<table></table>").append(tr);
                        return $("<div></div>").append(table).appendTo("body").hide();
                    },
                    onBeforeDrag: function (e) {
                        return e.which == 1;
                    },
                    onDrag: function (e) {
                        var x = e.pageX - e.data.startX, y = e.pageY - e.data.startY;
                        if ((Math.abs(x) + Math.abs(y)) > 10) { $(this).draggable("proxy").show(); }
                    }
                });
            }, "json");
        });
    </script>
    
    <style type="text/css">
        table.html-table { border-width: 1px; border-style: solid; border-color: black; }
        table.html-table tr { height: 25px; }
        table.html-table th, table.html-table td { padding: 2px 5px 2px 5px; text-align: center; border-width: 0px 1px 1px 0px; border-style: solid; border-color: black; }
        table.html-table tr th:last-child, table.html-table tr td:last-child { border-right: 1px; }
        table.html-table td.boxNo { width: 80px; }
        table.html-table td.boxSpec { width: 40px; }
        table.html-table td.boxWeight { width: 40px; }
        table.html-table td.fromPort { width: 50px; }
        table.html-table td.toPort { width: 50px; }
        table.html-table td.bayCellNo { width: 60px; }
    </style>
</head>
<body>
    <div class="easyui-layout" data-options="fit: true">

        <div data-options="region: 'west', title: 'easyui-datagrid', split: false" style="width: 430px;">
            <table id="tt1"></table>
        </div>

        <div data-options="region: 'center', border: false"></div>

        <div data-options="region: 'east', title: 'html-table', split: false" style="width: 430px;">
            <table id="tt2" class="html-table" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th>boxNo</th>
                        <th>boxSpec</th>
                        <th>boxWeight</th>
                        <th>fromPort</th>
                        <th>toPort</th>
                        <th>bayCellNo</th>
                    </tr>
                </thead>
            </table>
        </div>

    </div>
</body>
</html>
